<!DOCTYPE html>
<html class="x-admin-sm">
{include file='public/header'}
<script src="/admin/xadmin/lib/layui/upload.js" charset="utf-8"></script>
<style>
    .moneyContent {
        padding: 15px 10px;
        border: 1px solid #c2c2c2;
        background-color: #fff;
    }

    .moneyContent .content {
        border: 1px solid #dcdcdc;
        padding: 10px 0
    }

    .moneyContent .content div {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .moneyContent .content .title {
        font-size: 24px;
    }

    .moneyContent .content .title,
    .moneyContent .content .price {
        margin-left: 10px;
    }

    .moneyContent .content .price i {
        color: #fa2a2d;
    }

    .moneyContent .content .tip {
        border-radius: 15px 0 0 15px;
        background-color: #fff;
        background-color: #fa2a2d;
        color: #fff;
        padding: 2px 8px;
        font-size: 12px;
    }

    .moneyContent .foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
    }

    .layui-form-radio {
        margin: 0;
        font-size: 16px;
    }

    .layui-form-radio:hover *,
    .layui-form-radioed,
    .layui-form-radioed>i {
        color: #1e9fff;
    }

    .layui-row {
        display: flex;
        justify-content: center;
    }

    .btn {
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }
    .moneyTemplate .layui-form-label{
        width: 95px;
        padding: 9px 5px;
    }
</style>

<body>
    <div class="x-body">
        <form class="layui-form" lay-filter="formAjax">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>模板名称
                </label>
                <div class="layui-input-block">
                    <input type="text" name="name" id="name" placeholder="充值模板名称" required="required"
                        lay-verify="required" autocomplete="off" class="layui-input" value="" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>类型
                </label>
                <div class="layui-input-block" id='select-rebate'>
                    <select name="type" id="type">
                        <option value="">请选择</option>
                        <option value="1">低充</option>
                        <option value="2">中充</option>
                        <option value="3">高充</option>

                    </select>
                </div>
            </div>
            <div class="layui-tab" lay-filter="tabs">
                <ul class="layui-tab-title">
                    <li class="layui-this">已充值用户</li>
                    <li>未充值用户</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-row">
                            <div class="layui-col-xs12 layui-col-md8 layui-col-space10" id="recharged_cont">
                                <!-- <div class="layui-col-xs6">
                                    <div class="moneyContent">
                                        <div class="content">
                                            <div>
                                                <span class="title">66元</span>
                                                <span class="tip">首充</span>
                                            </div>
                                            <div>
                                                <span class="price">
                                                    6600
                                                    <i>+4800K币</i>
                                                </span>
                                                <span class="tip" style="background-color: #f2f2f2;color:#000">全部用户</span>
                                            </div>
                                        </div>
                                        <div class="foot">
                                            <input type="radio" name="sex" value="1" title="默认勾选" checked="checked">
                                            <div>
                                                <i class="layui-icon layui-icon-edit" style="font-size: 24px;"></i>
                                                <i class="layui-icon layui-icon-delete" style="font-size: 24px;"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div> -->

                            </div>
                        </div>
                        <div class="btn">
                            <button type="button" class="layui-btn" onclick="add(1)">添加商品</button>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-row">
                            <div class="layui-col-xs12 layui-col-md8 layui-col-space10" id="not_recharged_cont">

                            </div>
                        </div>
                        <div class="btn">
                            <button type="button" class="layui-btn" onclick="add(2)">添加商品</button>
                        </div>
                    </div>
                </div>
            </div>


            <input type="hidden" name="id" id="id" value="" />
            <input type="hidden" name="recharged_content" id="recharged_content" value="" />
            <input type="hidden" name="not_recharged_content" id="not_recharged_content" value="" />
            <button id="submitData" class="layui-btn" lay-submit lay-filter="submitData" style="display: none;" />

        </form>
    </div>
    <script>
        let params = {
            addUrl: '/cps/recharge/add',
            editUrl: '/cps/recharge/edit',
            detailUrl: '/cps/recharge/detail',
        }
        form_ajax(params)
        // 获取缓存中的数据
        let rc = JSON.parse(sessionStorage.getItem('recharged_content'))
        let nrc = JSON.parse(sessionStorage.getItem('not_recharged_content'))
        function add(type) {
            rc = JSON.parse(sessionStorage.getItem('recharged_content'));
            nrc = JSON.parse(sessionStorage.getItem('not_recharged_content'))
            if ((rc?.length == 6 && type == 1) || (nrc?.length == 6 && type == 2)) {
                layer.msg('最多选择6个', {
                    icon: 5
                });
                return false
            }
            layui.use('form', function () {
                var form = layui.form;
                sessionStorage.setItem('message',JSON.stringify({
                    name:form.val("formAjax").name,
                    type:form.val("formAjax").type
                }))
                let template_number = 0;
                if(type === 1){
                    template_number = rc?.length ?? 0
                }else{
                    template_number = nrc?.length ?? 0
                }
                x_admin_show('添加充值项', `./setList.html?type=${type}&template_number=${template_number}`, 1200, 550 ,null);
            })
        }
        let id = GetQueryString('id')
        if (id) {
            Ajax(params.detailUrl, { id }).then(result => {

                // 当前详情数据
                let rechargedData = result.data.recharged_content ? [...JSON.parse(result.data.recharged_content)] : []
                let not_rechargedData = result.data.not_recharged_content ? [...JSON.parse(result.data.not_recharged_content)] : []
                // 如果缓存有数据 替换
                if (rc) {
                    rechargedData = rc
                }
                if (nrc) {
                    not_rechargedData = nrc
                }
                // sessionStorage.clear()
                sessionStorage.setItem('recharged_content', JSON.stringify(rechargedData))
                sessionStorage.setItem('not_recharged_content', JSON.stringify(not_rechargedData))
                sessionStorage.setItem('message', JSON.stringify({
                    name:result.data.name,
                    type:result.data.type
                }))
                getContent()
            });
        } else {
            getContent()
        }

        function getContent() {
            $('#recharged_cont').html()
            $('#not_recharged_cont').html()
            // 获取设置的缓存数据
            let recharged_content = sessionStorage.getItem('recharged_content')
            let not_recharged_content = sessionStorage.getItem('not_recharged_content')
            let PisplayObject = new Promise((resolve) => {
                Ajax('/cps/recharge/getPisplayObject', {}).then(result => {
                    resolve(result.data)
                });
            })
            Promise.all([PisplayObject]).then((dataArray) => {
                let rechargedContent = JSON.parse(recharged_content)
                let not_rechargedContent = JSON.parse(not_recharged_content)
                layui.use(['form','element'], function () {
                    var form = layui.form;
                    if (rechargedContent) {
                        // 循环创建模板等操作
                        let rechargedC = ''
                        let checked = false
                        rechargedContent.forEach((item, ind) => {
                            item.PisplayObject = dataArray[0]
                            item.checkedName = 'recharged'
                            item.index = ind
                            let cont = templetContent(item)
                            rechargedC += cont
                            if(item.checked == 'checked'){
                                checked = true
                            }
                        })
                        if(!checked && rechargedContent[0]){
                            rechargedContent[0]['checked'] = 'checked'
                        }
                        $('#recharged_cont').html(rechargedC)
                        $('#recharged_content').val(JSON.stringify(rechargedContent))
                        // 单选框事件
                        form.on('radio(recharged_radio)', function (data) {
                            rechargedContent.forEach((v, index) => {
                                if (v.id == data.value) {
                                    rechargedContent[index].checked = 'checked'
                                }else{
                                    rechargedContent[index].checked = ''
                                }
                            })
                            $('#recharged_content').val(JSON.stringify(rechargedContent))
                        });
                    }

                    if (not_rechargedContent) {
                        let not_rechargedC = ''
                        let checked = false
                        not_rechargedContent.forEach((item, ind) => {
                            item.PisplayObject = dataArray[0]
                            item.checkedName = 'not_recharged'
                            item.index = ind
                            let cont = templetContent(item)
                            not_rechargedC += cont
                            if(item.checked == 'checked'){
                                checked = true
                            }
                        })
                        if(!checked && not_rechargedContent[0]){
                            not_rechargedContent[0]['checked'] = 'checked'
                        }
                        $('#not_recharged_cont').html(not_rechargedC)
                        $('#not_recharged_content').val(JSON.stringify(not_rechargedContent))

                        form.on('radio(not_recharged_radio)', function (data) {
                            if (not_rechargedContent) {
                                not_rechargedContent.forEach((v, index) => {
                                    if (v.id == data.value) {
                                        not_rechargedContent[index].checked = 'checked'
                                    }else{
                                        not_rechargedContent[index].checked = ''
                                    }
                                })
                                $('#not_recharged_content').val(JSON.stringify(not_rechargedContent))
                            }
                        });
                    }
                    form.val("formAjax",JSON.parse(sessionStorage.getItem('message')))
                    form.render()

                })
            })
        }
        function templetContent(params) {
            let { id, display_object, label, name, original_currency, platform_type, recharge_price, send_currency, send_title, sum_currency, PisplayObject, checked, checkedName, index } = params
            if (PisplayObject !== []) {
                PisplayObject.forEach(v => {
                    if (v.type == display_object) {
                        display_object = v.name
                    }
                })
            }
            return `<div class="layui-col-xs12 layui-col-md6 brick" style='height:155px' data-message=${JSON.stringify(params)} data-session_name=${checkedName}>
                        <div class="moneyContent">
                            <div class="content">
                                <div>
                                    <span class="title">${name}</span>
                                    <span class="tip">${label}</span>
                                </div>
                                <div>
                                    <span class="price">
                                        ${original_currency}K币
                                        ${send_currency ? `<i>+${send_currency}K币</i>` : ''}
                                    </span>
                                    <span class="tip" style="background-color: #f2f2f2;color:#000">${display_object}</span>
                                </div>
                            </div>
                            <div class="foot">
                                <input type="radio" lay-filter="${checkedName}_radio" name="${checkedName}_checked" value="${id}" title="默认勾选" ${checked ? checked : ''}>
                                <div>
                                    <i class="layui-icon layui-icon-set-sm setting" style="font-size: 20px;font-weight:bold" data-index='${index}' data-type='${checkedName}'></i>
                                    <i class="layui-icon layui-icon-edit edit" style="font-size: 24px;" data-params='${JSON.stringify(params)}' data-index='${index}'></i>
                                    <i class="layui-icon layui-icon-delete delete" style="font-size: 24px;" data-type='${checkedName}_content' data-index='${index}' ></i>
                                </div>
                            </div>
                        </div>
                    </div>`
        }
        // 删除
        $("body").on("click", ".delete", function () {
            let type = $(this).attr('data-type')
            let index = $(this).attr('data-index')
            layer.confirm('确认要删除吗？', function (layMask) {
                let rc = JSON.parse(sessionStorage.getItem('recharged_content'))
                let nrc = JSON.parse(sessionStorage.getItem('not_recharged_content'))
                type == 'recharged_content' ? rc.splice(index, 1) : nrc.splice(index, 1)
                sessionStorage.setItem(type, JSON.stringify(type == 'recharged_content' ? rc : nrc))
                getContent()
                layer.close(layMask);
            });
        });
        // 修改
        $("body").on("click", ".edit", function () {
            let params = JSON.parse($(this).attr('data-params'))
            let template_index = JSON.parse($(this).attr('data-index'))
            layui.use(["form", "layer"], function () {
                $ = layui.jquery;
                var form = layui.form,
                    layer = layui.layer;
                
                layer.open({
                    type: 1,
                    title: '编辑',
                    btn: ['保存', '取消'],
                    maxHeight: '500',
                    content: `
                        <div class="x-body moneyTemplate" >
                            <form class="layui-form" lay-filter="editTemplate">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        <span class="x-red">*</span>名称
                                    </label>
                                    <div class="layui-input-block">
                                        <input type="text" name="name" id="money_name" placeholder="名称" required="required" lay-verify="required" autocomplete="off" class="layui-input" value="" />
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        <span class="x-red">*</span>充值金额(元)
                                    </label>
                                    <div class="layui-input-block">
                                        <input type="text" name="recharge_price" id="recharge_price" placeholder="充值金额" required="required"
                                            lay-verify="required" autocomplete="off" class="layui-input" value="" />
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        <span class="x-red">*</span>充值K币
                                    </label>
                                    <div class="layui-input-block">
                                        <input type="text" name="original_currency" id="original_currency" placeholder="充值K币" disabled autocomplete="off" class="layui-input" value="" />
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        <span class="x-red">*</span>赠送K币
                                    </label>
                                    <div class="layui-input-block">
                                        <input type="text" name="send_currency" id="send_currency" placeholder="赠送K币" required="required"
                                            lay-verify="required" autocomplete="off" class="layui-input" value="" />
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        <span class="x-red">*</span>标签
                                    </label>
                                    <div class="layui-input-block">
                                        <input type="text" name="label" id="label" placeholder="标签" required="required"
                                            lay-verify="required" autocomplete="off" class="layui-input" value="" />
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        <span class="x-red">*</span>展示对象
                                    </label>
                                    <div id="pMenu"></div>
                                </div>
                                <input type="hidden" name="id" id="id" value="" />
                                <input type="hidden" name="index" value="" />
                                <input type="hidden" name="checkedName" value="" />
                                <button id="submitTemplate" class="layui-btn" lay-submit lay-filter="submitTemplate" style="display: none;" />
                                
                            </form>
                        </div>
                    `,
                    yes: function(layMask){
                        let data = form.val("editTemplate")
                        let temContent = JSON.parse(sessionStorage.getItem(data.checkedName+'_content'))
                        let now_template = temContent[template_index]
                        if($("#money_name").val() == ''){
                            layer.msg('名称不能为空！',{icon:5,time:2000})
                            return;
                        }
                        if(Number($("#recharge_price").val()) <= 0){
                            layer.msg('金额不能为0！',{icon:5,time:2000})
                            return;
                        }
                        
                        // temContent.forEach((v,i)=>{
                        //     if(Number(v.id) === Number(data.id)){
                        //         Object.keys(data).forEach((item,index)=>{
                        //             v[item] = Object.values(data)[index]
                        //         })
                        //         v.sum_currency = Number(v.original_currency) + Number(v.send_currency)
                        //     }
                        // })
                        Object.keys(data).forEach((item,index)=>{
                            now_template[item] = Object.values(data)[index]
                        })
                        now_template.sum_currency = Number(now_template.original_currency) + Number(now_template.send_currency)
                        sessionStorage.setItem(data.checkedName+'_content',JSON.stringify(temContent))
                        getContent()
                        layer.close(layMask)
                    }
                });
                form.val("editTemplate", params);
                let selectParams = {
                    url: '/cps/recharge/getPisplayObject',
                    elem: '#pMenu',
                    selected: [params.display_object],
                    tips: '选择展示对象',
                    name: 'display_object',
                    field_id: 'type',
                    field_Name: 'name',
                }
                selectN(selectParams)
                $("#recharge_price").on('input propertychange', function(e){
                    $("#original_currency").val((clearNoNum($(this)) * 100).toFixed())
                })
            });
            
        });
        // 设置
        $("body").on("click", ".setting", function () {
            let type = $(this).attr('data-type') == 'recharged' ? 1 : 2
            let index = $(this).attr('data-index')
            sessionStorage.setItem(type+'_index',index)
            x_admin_show('修改充值项', `./setList.html?type=${type}&seting=${index}`, 1200, 550 ,null);
        });

        function clearNoNum(that) {
            let num = that.val()
            num = num.replace(/[^\d.]/g, "");  //清除“数字”和“.”以外的字符   
            num = num.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的   
            num = num.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
            num = num.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能输入两个小数   
            if (num.indexOf(".") < 0 && num != ""){
                num = parseFloat(num);
            }
            that.val(num)
            return num
        }
    </script>

</body>

</html>